<template>
<div id="main" :style="styleBase">

   <TimeLine :base="timeLineBase" @timeLineSelectMethod="timeLineSelectMethod"/>

   <div :style="bottomStyleBase"> 
        <div id="leftContainer" :style="leftStyleBase">
            <Map :base="leftChildrenBase" 
                :mapSelectName="mapSelectName" 
                :mapSelectNames="mapSelectNames"
                @mapSelectMethod="mapSelectMethod"
            />
            <PieChart :base="leftChildrenBase" :initData="initData" 
            :chartSelectNames="chartSelectNames"
            @chartSelectMethod="chartSelectMethod"
             />
        </div>
        <div id="rightContainer" :style="rightStyleBase">
            <Sankey :base="sankeyBase" :initData="initData" 
            :sankeySelectName="sankeySelectName"
            @sankeySelectMethod="sankeySelectMethod"
            @sankeyManySelectMethod="sankeyManySelectMethod"
             />
        </div>
   </div>
</div>
</template>
 
<script>
import 'assets/newfont.css'
import initData from 'api/json/sankey.json'
import Map from 'components/Map'
import PieChart from 'components/PieChart'
import Sankey from 'components/Sankey'
import TimeLine from 'components/TimeLine'
export default {
   name: 'Main',
   props: {
       base: {
           type: Object,
       }
   },
   data () {
       return {
           /* 需要调整的数据 */
           sankeyHeight: 700,
           leftPaddingTop: 5,
           //左视图宽度 其余自动计算
           leftWidth: 500,
           
           initData: {},
           /* map 高亮所需传递 */
           mapSelectNames: [],
           mapSelectName:'',
           /* chart 高亮所需传递 */
           chartSelectNames: [],
           /* sankey高亮所需传递 */
           sankeySelectName: '',
           // 左侧内边距
           
           timeLineHeight: 390,
       }
   },
   mounted() {
       this.initData = initData
   },
   computed: {
       styleBase() {
           return {
               width: this.base.width+"px",
               height: this.base.height+"px",
           }
       },
       bottomStyleBase() {
           return {
               paddingTop: (this.base.height - this.sankeyHeight)+"px",
               width: this.base.width+"px",
               height: this.sankeyHeight+"px",
           }
       },
       leftStyleBase() {
           return {
               paddingTop: this.leftPaddingTop + "px",
               width: this.leftWidth+"px",
               height: (this.sankeyHeight- this.leftPaddingTop) +"px",
           }
       },
       rightStyleBase() {
           return {
               width: this.base.width-this.leftWidth+"px",
               height: this.sankeyHeight +"px"
           }
       },
       leftChildrenBase() {
           return {
               width: parseInt(this.leftStyleBase.width),
               height: parseInt(this.leftStyleBase.height)/2,
           }
       },
       sankeyBase() {
           return {
               width: parseInt(this.rightStyleBase.width),
               height: this.sankeyHeight,  
           }
       },
       timeLineBase() {
           return {
               width: this.base.width,
               height: this.timeLineHeight,
           }
       }
   },
   components: {
       Map,
       PieChart,
       Sankey,
       TimeLine,
   },
   methods: {
       chartSelectMethod(name) {
           this.sankeySelectName = name
           this.mapSelectName = name
       },
       mapSelectMethod(name) {
           if(name=="") this.chartSelectNames = []
           else this.chartSelectNames = [name]
           this.sankeySelectName = name
       },
       sankeySelectMethod(name) {
           if(name=="") this.chartSelectNames = []
           else this.chartSelectNames = [name]
           this.mapSelectName = name
       },
       sankeyManySelectMethod(museumNames) {
           this.mapSelectNames = museumNames
           this.chartSelectNames = museumNames
       },
       timeLineSelectMethod(name) {
           if(name=="") this.chartSelectNames = []
           else this.chartSelectNames = [name]
           this.mapSelectName = name
           this.sankeySelectName = name
       }

   },
}
</script>
 
<style>
#main {
    font-family: '我的字体';
    font-size: 14;
    color: #7a4c3d;
    font-weight: 500;
}
#leftContainer,#rightContainer {
    float: left;
}

#rightContainer {

}
.el-form-item__label{
    width: 109%;
}

</style>